<template>
  <div class="app-container">
    <el-form ref="form" :model="teacherInfo" label-width="120px">
      <el-form-item label="讲师姓名">
        <el-input v-model="teacherInfo.name"/>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacherInfo.level" placeholder="请选择讲师头衔">
          <el-option label="高级讲师" value="1"/>
          <el-option label="首席讲师" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacherInfo.career"/>
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-radio-group v-model="teacherInfo.sort">
          <el-radio label="1" value="1"/>
          <el-radio label="2" value="2"/>
          <el-radio label="3" value="3"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="teacherInfo.intro" type="textarea"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="saveBtnDisabled" @click="onSubmit">创建</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import teacher from '@/api/edu/teacher'

export default {
  name: 'Save',
  created() {
    this.init()
  },
  mounted() {

  },

  data() {
    return {
      flag: '',
      teacherInfo: {
        name: '',
        intro: '', // 讲师简介
        career: '', //讲师资历
        level: '', // 头衔 1高级讲师 2首席讲师
        sort: '' // 1 2
      },
      saveBtnDisabled: false // 保存按钮是否禁用
      // cancelBtnDisabled: true // 保存按钮是否禁用
    }
  },
  methods: {
    init() {
      this.flag = this.$route.query.id
      if (this.flag) {
        teacher.selectTeacherById(this.flag).then(response => {
          this.teacherInfo = response.data.teacher
        })
      } else {
        this.teacherInfo = {}
      }
    },
    async onSubmit() {
      this.saveBtnDisabled = true

      if (!this.flag) {
        teacher.saveTeacher(this.teacherInfo)
          .then(() => {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
          })
          .then(() => {
            this.$router.push({ path: '/teacher/list' })
          })
          .catch(() => {
            this.$message({
              message: '提交失败',
              type: 'error'
            })
          })
      } else {
        teacher.updateTeacherById(this.flag, this.teacherInfo)
          .then(() => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          })
          .then(() => {
            this.$router.push({ path: '/teacher/list' })
          })
          .catch()
      }
    },
    onCancel() {
      this.teacherInfo = {}
      this.$message({
        message: '已清空~',
        type: 'warning'
      })
    }
  },
  watch: {
    // 监听
    $route(to, from) {
      //路由变化方式,路由发生变化,方法就会执行
      this.init()
    }
  }
}
</script>

<style scoped>
.app-container {
  padding-left: 0;
  margin: 20px 0 0 0;
}

</style>

